import React, {Component} from 'react'
import {
    View,
    StyleSheet,
    Image,
    Text,
    TouchableOpacity
} from 'react-native'
import {deviceWidth} from "src/util"
import ActionSheet from 'react-native-actionsheet'
import ImagePicker from 'react-native-image-crop-picker'
import {uploadIdentifyCardImage} from 'src/service/Auth'
import Layer from "src/components/Layer"
import {inject} from "mobx-react/native"

@inject('userAuth')
export default class UploadIdCard extends Component<{}> {
    constructor (props) {
        super(props)
        this.state = {
            leftImage: undefined,
            rightImage: undefined,
            name: '',
            idcard: ''
        }
    }
    render() {
        return (
            <View style={[styles.container, this.props.style]}>
                <Text style={styles.IdText}>请上传身份证</Text>
                <View style={{display: 'flex', flexDirection: 'row', marginTop: 16}}>
                    <TouchableOpacity style={styles.cameraArea} onPress={()=>{
                        this.choose = 'front'
                        this.ActionSheet.show()
                    }}>
                        {this.state.leftImage && <Image source={{uri: this.state.leftImage}} style={styles.background}/>}
                        <View>
                            <Image source={{uri: this.state.leftImage}} source={require('src/assets/mine/camera.png')}/>
                            <Text style={styles.uploadText}>上传正面</Text>
                        </View>
                    </TouchableOpacity>
                    <View style={{flex: 1}}/>
                    <TouchableOpacity style={styles.cameraArea} onPress={()=>{
                        this.choose = 'back'
                        this.ActionSheet.show()
                    }}>
                        {this.state.rightImage && <Image source={{uri: this.state.rightImage}} style={styles.background}/>}
                        <View>
                            <Image source={require('src/assets/mine/camera.png')}/>
                            <Text style={styles.uploadText}>上传反面</Text>
                        </View>
                    </TouchableOpacity>
                </View>
                <ActionSheet
                    ref={o => this.ActionSheet = o}
                    options={['拍照', '从手机相册选择', '取消']}
                    cancelButtonIndex={2}
                    onPress={(index) => {
                        var promise = undefined
                        if(index === 0) {
                            promise = ImagePicker.openCamera({
                                width: 300,
                                height: 400,
                                cropping: true,
                            })
                        }else if (index === 1) {
                            promise = ImagePicker.openPicker({
                                width: 300,
                                height: 400,
                                cropping: true
                            })
                        }
                        if(promise){
                            promise.then(image => {
                                console.log(image);
                                Layer.showMsg('开始上传')
                                uploadIdentifyCardImage({
                                    image: image,
                                    token: this.props.userAuth.token,
                                    type: this.choose
                                }).then((res) => {
                                    if (this.choose === 'front'){
                                        this.setState({
                                            leftImage: res.data.idcard_left
                                        })
                                        this.props.callBack && this.props.callBack({
                                            name: res.data.name,
                                            idcard: res.data.idcard
                                        })
                                    }else {
                                        this.setState({
                                            rightImage: res.data.idcard_right
                                        })
                                    }
                                })
                            })
                        }
                    }}
                />
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        display: 'flex',
        justifyContent: 'flex-start',
        paddingLeft: 15,
        paddingRight: 15,
        backgroundColor: 'transparent'
    },
    cameraArea: {
        width: (deviceWidth -51) / 2,
        height: (deviceWidth -51)/2 * 109 / 161,
        backgroundColor: 'rgba(55, 142, 251, 0.05)',
        borderRadius: 5,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center'
    },
    IdText: {
        fontSize: 16,
        lineHeight: 22,
        color: '#2E2E2E',
        fontFamily: 'PingFang SC'
    },
    uploadText: {
        fontSize: 12,
        lineHeight: 17,
        color: '#8E8E93',
        fontFamily: 'PingFang SC',
        marginTop: 8
    },
    background: {
        width: (deviceWidth -51) / 2,
        height: (deviceWidth -51)/2 * 109 / 161,
        position: 'absolute',
        left: 0,
        top: 0,
        borderRadius: 5
    }
})